<template>
<div class="main">
    <div>
        <Form ref="formDynamic" :model="formDynamic" style="width: 50rem">
            <FormItem
                    v-for="(item, index) in formDynamic.items"
                    v-if="item.status"
                    :key="index"
                    :prop="'items.' + index + '.value'"
                    :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
                <Row :gutter='16'>
                     <Col span="10">
                        <Select>
                            <Option value="beijing">发送群组频道</Option>
                            <Option value="shanghai">发送普通内容</Option>
                            <Option value="shenzhen">发送自定义内容</Option>
                            <Option value="beijing">点击机器人内联键盘</Option>
                            <Option value="shanghai">监听</Option>
                            <Option value="shenzhen">等待</Option>
                            <Option value="beijing">发送计算结果</Option>
                            <Option value="shanghai">发送点击图标验证</Option>
                        </Select>
                    </Col>
                    <Col span="10">
                        <Input type="text" v-model="item.value" placeholder="群组或频道的username"></Input>
                    </Col>
                    <Col span="4">
                        <Button type="primary" @click="handleRemove(index)" icon="close"></Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Row :gutter='16'>
                    <Col span="4">
                        <Button type="primary"  @click="handleAdd" >新增操作</Button>
                    </Col>
                    <Col span="4" pull=1>
                        <Button type="primary"  @click="handleAdd">批量导入</Button>
                    </Col>
                    <Col span="6" pull=2>
                        <Button type="primary" @click="handleReset('formDynamic')" style="margin-left: 8px">清空全部自定义值</Button>
                    </Col>
                    <Col span="6" pull=3>
                        <Slider :min='1' :max='12' :tip-format="format"></Slider>
                    </Col>
                    <Col span="4" pull=3>
                        <Button type="primary" @click="handleSubmit('formDynamic')">开始</Button>
                    </Col>
                </Row>
            </FormItem>
        </Form>
    </div>
</div>
</template>
<script>
    export default {
        data () {
            return {
                index: 1,
                formDynamic: {
                    items: [
                        {
                            value: '',
                            index: 1,
                            status: 1
                        }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!')
                    } else {
                        this.$Message.error('Fail!')
                    }
                })
            },
            handleReset (name) {
                 this.$refs[name].resetFields()
                this.formDynamic.items = [{
                            value: '',
                            index: 1,
                            status: 1
                        }]
            },
            handleAdd () {
                this.index++
                this.formDynamic.items.push({
                    value: '',
                    index: this.index,
                    status: 1
                })
            },
            handleRemove (index) {
                this.formDynamic.items[index].status = 0
            },
            format (val) {
                return '线程数: ' + val
            }
        }
    }
</script>
<style lang="scss" scoped>
.main{
    margin: 2rem;
}
</style>
